<template>
<!-- 这是合作商 -->
  <div id="partner">
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    <div class="title_swipe">
      <van-swipe :autoplay="8000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img :src="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="middle_img">
      <div class="img_title">
        <van-cell title="合作商" icon="medal-o" />
      </div>
      <div class="title_swipe">
        <van-swipe :autoplay="5000" @change="onChange">
          <van-swipe-item v-for="(img, index) in imageList" :key="index">
            <a :href="img.url"><img :src="img.imgs" /></a>
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">
              {{ current + 1 }}/33
            </div>
          </template>
        </van-swipe>
        
      </div>
      <!-- <div class="tab">
        <van-row v-for="(img, index) in imglist" :key="index">
          <van-col span="7">
            <div class="tab_left">
              <a :href="img.url"><img v-lazy="img.imgs" /></a>
            </div>
          </van-col>
          <van-col span="17">
            <div class="tab_right">
              <a :href="img.url">
                <div class="right_title">{{img.title}}</div>
                <div class="right_address">{{img.address}}</div>
                <div class="right_phone">{{img.phone}}</div>
                <div class="right_classification">{{img.classification}}</div>
              </a>
            </div>
          </van-col>
        </van-row>
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      current: 0, //轮播指示器位置
      // 头部轮播图
      images: [
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596000673320&di=f7d3450009a48035171e7d1032fa86ea&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201708%2F16%2F013425jmbbbj5vvv1lmnn7.png.thumb.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596000771596&di=8a0772fb8b5d353020f3c41f040b4698&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201702%2F24%2F084858ute2yve3epd3qvvp.jpg',
      ],
      // 合作商
      // imageList: [
      //   'https://mp.uekea.cn/attachment/images/2/2019/01/Uo9i99b7SHyhIIuhb7I9b7OBoIbvur.jpg',
      //   'https://mp.uekea.cn/attachment/images/2/2019/01/lzmr28UeMweuGKR4rI24FRJr3BIe14.jpg',
      //   'https://mp.uekea.cn/attachment/images/2/2019/01/GIGQUgUeiKm2Qi8eYFMe62624Z9Yc6.jpg',
      //   'https://mp.uekea.cn/attachment/images/2/2019/01/bnksHdenHFxd52fFdYyMfFk30FNSMy.jpg',
      //   'https://mp.uekea.cn/attachment/images/2/2019/01/Z0itZ8y08k008myG0pi0yQ8oKu8EgY.jpg',
      //   'https://mp.uekea.cn/attachment/images/2/2019/01/HimGkRuCxwNLckPlZYD82kd8gKr288.jpg',
      //   'https://mp.uekea.cn/attachment/images/2/2019/01/QiiYK8K4yI0Vir55O22I5yrCZrPOr1.jpg',
      //   'https://mp.uekea.cn/attachment/images/2/2019/01/D0NI16i8iu6uSzsn8IXpxY5i056YpX.jpg',
      //   'https://mp.uekea.cn/attachment/images/2/2019/01/MME4QeQB5pEp5RD5f4q4CQB3DQmb5b.jpg',
      //   'https://mp.uekea.cn/attachment/images/2/2019/05/KYhqlLgg3wLQ5XL3f2dr3FfqfxQ2qH.png',
      //   'https://mp.uekea.cn/attachment/images/2/2019/01/mc4MrLg2Zg3s3dZ82TC7sJ8212S4xc.jpg',
      //   'https://mp.uekea.cn/attachment/images/2/2019/01/afD7FHwMFTAaCFxtt26hmJnj6A13Mb.jpg',
      //   'https://mp.uekea.cn/attachment/images/2/2019/01/Y4qaqBeKk43eWrEBi4z3Z34lieOr3l.jpg',
      //   'https://mp.uekea.cn/attachment/images/2/2019/01/c859N999oQCshS73if9NnCfgzcqIFs.jpg',
      //   'https://mp.uekea.cn/attachment/images/2/2019/01/zi1AzjjMwz118C8PkRq11kaQj78Q5w.jpg',
      //   'https://mp.uekea.cn/attachment/images/2/2019/01/P4gN5gfFJ4AMgu9YgBGyGZ6bMb5KFK.jpg',
      // ],

      // 合作商
      imageList: [
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/2019/01/NqZs76676Qq76ZsyGSMg373W3677Q7.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=100',
          title: '优粤家模型',
          address: '地址: 广东省广州市番禺区富华路2号',
          phone: '电话: 020-84225465',
          classification: '分类: 设计类',
        },
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/2018/12/fY32Ff3F3I1GBF37Fr7bybYFZ3c73C.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=134',
          title: '摩登家庭',
          address: '地址: 广东省广州市番禺区富华路2号',
          phone: '电话: 020-84747123',
          classification: '分类: 家私类',
        },
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/2018/12/ufPvK34Esvx8C3X4FqupSSpXzu4eVh.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=135',
          title: '茧约家居',
          address: '地址: 广州市番禺区桥南街奥园养生广场内商铺三楼326号',
          phone: '电话: 18078819668',
          classification: '分类: 家私类',
        },
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/2018/12/s4HsNbT63BBQ9O38L9Bbwsx4NsBdnt.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=130',
          title: '法恩莎洁具',
          address: '地址: 广东省广州市番禺区富华路2号',
          phone: '电话: 020-84747123',
          classification: '分类: 建材类',
        },
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/merch/131/E60Ldh661QVVhah33A1pA30hACDqh0.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=131',
          title: '肖红军 设计总监',
          address: '地址: 广东省广州市番禺区富华路2号',
          phone: '电话: 020-84747123',
          classification: '分类: 设计类',
        },
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/2018/12/Vk3LgBs35SSS9tx95BDsssDLL39sB9.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=132',
          title: '丁焕铭',
          address: '地址: 广东省广州市番禺区富华路2号',
          phone: '电话: 020-84747123',
          classification: '分类: 设计类',
        },
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/2018/12/W4uhUQ5coGqpBpp4IHzvn66fS6B3kh.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=133',
          title: '黄良楷',
          address: '地址: 广东省广州市番禺区桥南街福景路2号',
          phone: '电话: 020-84747123',
          classification: '分类: 设计类',
        },
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/2018/12/xKBAjQBaAy4aKfJkDdPyqy5bbO4DMn.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=139',
          title: '曹工',
          address: '地址: 广东省广州市番禺区富华路2号',
          phone: '电话: 020-84747123',
          classification: '分类: 设计类',
        },
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/2018/12/NlbsoObuKZzW2aojSHohWO5SLKOlA8.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=140',
          title: '陈玉龙',
          address: '地址: 广东省广州市番禺区富华路2号',
          phone: '电话: 020-84747123',
          classification: '分类: 设计类',
        },
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/2018/12/arY5OrJukOa0ZY2YKyyaU2X5j0Tuy5.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=141',
          title: '范彪',
          address: '地址: 广东省广州市番禺区桥南街福景路2号',
          phone: '电话: 020-84747123',
          classification: '分类: 设计类',
        },
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/2018/12/qq30gkg6z3CIE6eic6yK2gcGcZO03c.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=142',
          title: '何建良',
          address: '地址: 广东省广州市番禺区富华路2号',
          phone: '电话: 020-84747123',
          classification: '分类: 设计类',
        },
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/2018/12/J4V7m1nNoVJcOuM3sc95CnVuC0VVSG.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=143',
          title: '黄倩男',
          classification: '分类: 设计类',
        },
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/2018/12/Hs633eEjmAnlZ0XmseqljwaefMmbVa.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=144',
          title: '李培波',
          address: '地址: 广东省广州市番禺区富华路2号',
          phone: '电话: 020-84747123',
          classification: '分类: 设计类',
        },
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/2018/12/Dt3g7VG3wg3O6jV01TSJNMT14oVS00.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=145',
          title: '崔连彪',
          address: '地址: 广东省广州市番禺区富华路2号',
          phone: '电话: 020-84747123',
          classification: '分类: 设计类',
        },
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/2018/12/aZC7i7D4PZn5Zu3zdP3l4443nnu4w3.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=146',
          title: '王连军',
          address: '地址: 广东省广州市番禺区富华路2号',
          phone: '电话: 020-84747123',
          classification: '分类: 设计类',
        },
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/2018/12/TPZUePVvikEJdIUeJijKQdIGJ9QDWd.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=147',
          title: '熊贻龙',
          address: '地址: 广东省广州市番禺区富华路2号',
          phone: '电话: 020-84747123',
          classification: '分类: 设计类',
        },
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/2018/12/L574B47hBp4QxLhPLqq99PxBx47Xh5.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=148',
          title: '余晓山',
          address: '地址: 广东省广州市番禺区富华路2号',
          phone: '电话: 020-84747123',
          classification: '分类: 设计类',
        },
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/2018/12/wT8CPu7sCs3kAa837T665Tp735A88A.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=149',
          title: '黄明冠',
          address: '地址: 广东省广州市番禺区富华路2号',
          phone: '电话: 020-84747123',
          classification: '分类: 设计类',
        },
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/2018/12/foOuhpvVv7PmHrH67O5vHvOrM773Ux.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=151',
          title: '陈奇聪',
          address: '地址: 广东省广州市番禺区桥南街福景路2号',
          phone: '电话: 020-84747123',
          classification: '分类: 设计类',
        },
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/2019/01/Y4qaqBeKk43eWrEBi4z3Z34lieOr3l.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=152',
          title: '钟华',
          address: '地址: 广东省广州市番禺区桥南街福景路2号',
          phone: '电话: 020-84747123',
          classification: '分类: 设计类',
        },
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/merch/154/r8jyJSt6Y088SSPTpj6jtTCPzyt8t6.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=154',
          title: '爱普克斯环保',
          address: '地址: 佛山市顺德区北滘镇兴业路4号加利源工业园5栋7楼',
          phone: '电话: 0757-2666 0788',
          classification: '分类: 服务类',
        },
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/2019/01/XcNP0n7N21XNtpQexeqn02nfnNn5EX.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=155',
          title: '净管家环保',
          address: '地址: 广州市金沙洲沙凤富业大楼5层',
          phone: '电话: 13556150002',
          classification: '分类: 服务类',
        },
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/2019/01/nBoOCfmmFF22Rmoc3b2ByD52F1xy1Z.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=156',
          title: '楷模家居',
          classification: '分类: 家私类',
        },
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/2019/01/q33SYPt7fcTK78CY7Ta8iZVQLaK7a8.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=157',
          title: '高品木业',
          address: '地址: 广州市南沙区榄核镇大坳村工业区',
          phone: '电话: 18819235443',
          classification: '分类: 建材类',
        },
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/2019/01/DI71nRi1IiJiMNN2jJ55tNYppu6miG.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=161',
          title: '欧神诺瓷砖',
          classification: '分类: 建材类',
        },
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/2019/01/Oi52SBBWI4cqps5bCTPu5dPsPcStIk.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=162',
          title: '梵檀地板',
          classification: '分类: 建材类',
        },
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/2019/01/Lkaff7kJJlZ5Nnh8Qg77jt8J1ykFfZ.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=163',
          title: '万美官方旗航店',
          classification: '分类: 建材类',
        },
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/2019/01/G8e5lw2w3p5985825pMG2ERm3531HP.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=164',
          title: '桑乐金',
          address: '地址: 广州市番禺区吉盛伟邦建材馆A1062',
          classification: '分类: 家私类',
        },
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/2019/01/m7u7kk3NXXALm9xak39z6mGK7kkKUm.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=167',
          title: '美雅布艺',
          address: '地址: 广东省广州市番禺区市桥清河东路92号',
          classification: '分类: 建材类',
        },
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/2019/08/c1u1rMdrzm1zs314414rOwWHuss3Ml.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=168',
          title: '浪鲸',
          classification: '分类: 建材类',
        },
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/2019/08/gaD7Dqi4p770KQZ3R0ZzdDK3QfAh77.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=169',
          title: '亚材门窗',
          address: '地址: 广州市番禺大道北吉盛伟邦家居建材馆三楼C3069-3070',
          classification: '分类: 建材类',
        },
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/2019/08/h0wzsA8GacVC2a282Sas8C12j8spjS.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=170',
          title: '柏西全屋定制',
          address: '地址: 广州市番禺区钟村街雄峰南二街24号',
          classification: '分类: 家私类',
        },
        {
          imgs: 'https://mp.uekea.cn/attachment/images/2/2019/08/mD1l2lYPxDpLL919QpKps99XLLHWL1.jpg',
          url: 'https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=merch&merchid=171',
          title: '中凌智能家居',
          address: '地址: 广州市南沙区榄核镇大坳村工业区',
          phone: '电话: 18819235443',
          classification: '分类: 建材类',
        },
      ],
    }
  },
  methods: {
    onClickLeft() {
      window.history.go(-1);
    },
    onChange(index) {
      this.current = index;
    },
  }
}
</script>

<style lang="less" scoped>
// #partner {
//   background-color: white;
// }
/deep/ .swipe {
  overflow: hidden;
}
.van-swipe-item {
  font-size: 0px;
  transform: translate3d(0,0,0);
  img {
    height: 100%;
    width: 100%;
  }
}
/deep/ .van-swipe__indicator {
  height: 8px;
  width: 8px;
  opacity: 0.5;
  background-color: #ccc;
}
/deep/ .van-swipe__indicator--active {
  background-color: white;
  opacity: 1;
}
// 轮播指示器
.custom-indicator {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
.middle_img {
  font-size: 0px;
  // img {
  //   height: 100%;
  //   width: 100%;
  // }
}
.title_swipe {
  height: 100vh;
  .van-swipe {
    height: 100%;
  }
}
.img_title {
  font-size: 26px;
  .van-cell {
    padding: 25px 15px;
    padding-bottom: 10px;
  }
  .van-cell__title {
    font-size: 22px;
  }
  .van-icon-medal-o {
    font-size: 24px;
    color: red;
  }
}
</style>